<template>
	<div class="renwuguanli">
		
		<div class="center">
		
			<div class="right">
				
				<div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
				<div class="powertop">
					<router-link class="powertopli powertopact" to="/duanxinlinshi/renwuguanli">任务管理</router-link>
					<router-link class="powertopli" to="/duanxinlinshi/addrenwu2">指定号码发送短信</router-link>
					<router-link class="powertopli" to="/duanxinlinshi/fasongjilu">发送记录</router-link>
				</div>
				<div class="conlist" v-loading='loading'>
					<div class="flex flexbt renguantop">
						<div class="jiedian flex">
							<div class="jiediand">短信发送节点</div>
							<div class="jiedianx">功能描述：在订单进入下列任意环节均可自动触发短信联系用户</div>
						</div>
						<div class="duanxin flex">
							<div class="duanxinn">短信余额：</div>
							<div class="duanxinu">{{duanxintiaoshu}}条</div>
							<router-link to="/duanxinlinshi/duanxinchongzhi" class="duanxinb">充值短信</router-link>
						</div>
					</div>
					<div class="flexm" style=" padding-top: 30px;">
						<div :class="imgs == 120 ? 'flexm flexact':'flexm'" @click="changeimg(120)" style="cursor: pointer;">
							<div v-if="imgs == 120"><img :src="src11"></div>
							<div v-if="imgs != 120"><img :src="src1"></div>
							<div>下单提醒</div>
						</div>
						<div class="flexm flexx"><img :src="src0"></div>
						<div :class="imgs == 150 ? 'flexm flexact':'flexm'" @click="changeimg(150)" style="cursor: pointer;">
							<div v-if="imgs == 150"><img :src="src22"></div>
							<div v-if="imgs != 150"><img :src="src2"></div>
							<div>待完善证件信息</div>
						</div>
						<div class="flexm flexx"><img :src="src0"></div>
						<div :class="imgs == -200 ? 'flexm flexact':'flexm'" @click="changeimg(-200)" style="cursor: pointer;">
							<div v-if="imgs == -200"><img :src="src33"></div>
							<div v-if="imgs != -200"><img :src="src3"></div>
							<div>证件信息不合格</div>
						</div>
						<div class="flexm flexx"><img :src="src0"></div>
						<div :class="imgs == -460 ? 'flexm flexact':'flexm'" @click="changeimg(-460)" style="cursor: pointer;">
							<div v-if="imgs == -460"><img :src="src44"></div>
							<div v-if="imgs != -460"><img :src="src4"></div>
							<div>开卡失败</div>
						</div>
						<div class="flexm flexx"><img :src="src0"></div>
						<div :class="imgs == 550 ? 'flexm flexact':'flexm'" @click="changeimg(550)" style="cursor: pointer;">
							<div v-if="imgs == 550"><img :src="src55"></div>
							<div v-if="imgs != 550"><img :src="src5"></div>
							<div>已发货提醒</div>
						</div>
					</div>
					<div class="flex flexbt renguantop">
						<div class="jiedian flex">
							<div class="jiediand">下单提醒任务</div>
						</div>
					</div>
					<div class="xinjianrenwu">
						<el-button type="danger" size="medium" @click="go">+新建任务</el-button>
					</div>
					<div class="list listth flex">
						<div class="th">任务名称</div>
						<div class="th">短信内容</div>
						<div class="th">创建时间</div>
						<div class="th">最后修改时间</div>
						<div class="th">开启状态</div>
						<div class="th" style="flex: 1.5;">操作</div>
					</div>
					<div class="list listtd flex" v-for="item in list" :key="item.id">
						<div class="td">
							<el-tooltip effect="dark" popper-class="tooltip" placement="top">
								<div slot="content">{{item.name}}</div>
								<div>{{item.name}}</div>
							</el-tooltip>
						</div>
						<div class="td" style="max-width: 179.39px;">
							<el-tooltip effect="dark" popper-class="tooltip" placement="top">
								<div slot="content">{{item.content}}</div>
								<div>{{item.content}}</div>
							</el-tooltip>
						</div>
						<div class="td">{{item.created_at}}</div>
						<div class="td">{{item.updated_at}}</div>
						<div class="td">
							<el-switch v-model="item.status == 1 ? true : false" @change="kaiguan(item.id,item.status)" active-color="#13ce66"
							 inactive-color="#ff4949"></el-switch>
						</div>
						<div class="td" style="flex: 1.5;">
							<el-button size="mini" type="primary" @click="fix(item.id)">查看</el-button>
							<el-button size="mini" type="primary" @click="fix(item.id)">修改</el-button>
							<el-button size="mini" type="primary" @click="del(item.id)">删除</el-button>
						</div>
					</div>
					<el-pagination style="text-align: right; padding: 20px;" background layout="total,prev, pager, next" :current-page="page"
					 @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
				</div>
			</div>
		</div>

		<!-- <foot></foot> -->
	</div>

</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	import moment from "moment";
	export default {
		components: {
			"left": left,
			"top": top,
			"foot": foot,
		},
		name: "renwuguanlil",
		data() {
			return {
				loading: true,
				src0: "./static/img/duanxin0.png",
				src1: "./static/img/duanxin1.png",
				src2: "./static/img/duanxin2.png",
				src3: "./static/img/duanxin3.png",
				src4: "./static/img/duanxin4.png",
				src5: "./static/img/duanxin5.png",
				src11: "./static/img/duanxin11.png",
				src22: "./static/img/duanxin22.png",
				src33: "./static/img/duanxin33.png",
				src44: "./static/img/duanxin44.png",
				src55: "./static/img/duanxin55.png",
				imgs: "120",
				list: "",
				duanxintiaoshu: 0,
				total: 0,
				pagesize: 20,
				page: 1,
			}
		},
		created() {

			if (this.$route.query.status) {
				this.imgs = this.$route.query.status.toString();
			}
			this.getlist();
			this.getmessagenumbers();
		},
		mounted() {

		},
		methods: {
			//翻页
			fanye: function(page) {
				this.loading = true
				this.page = page
				this.getlist()
			},
			//单个开关
			kaiguan: function(id, status) {
				var st
				var that = this
				if (status == 1) {
					st = 0
				} else {
					st = 1
				}
				this.loading = true
				axios.post('/api/plan-market/message/fixrenwu', {
						status: st,
						id: id
					})
					.then(response => {
						if (response.data.msg.code == 0) {
							that.getlist()
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//删除
			del: function(id) {
				this.$confirm('确定要删除此任务吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var that = this;
					axios.post('/api/plan-market/message/deleterenwu', {
							id: id
						})
						.then(response => {
							if (response.data.msg.code == 0) {
								that.getlist()
							} else {
								if (response.data.msg.code == 50401) {
									that.$router.push({
										path: "/login"
									});
									return false
								}
								that.$message.error(response.data.msg.info);
							}
						})
				})
			},
			//跳转修改
			fix: function(id) {
				this.$router.push({
					path: '/duanxinlinshi/addrenwu',
					query: {
						id: id
					}
				})
			},
			go: function() {
				this.$router.push({
					path: '/duanxinlinshi/addrenwu',
					query: {
						status: this.imgs
					}
				})
			},
			//选择状态类别
			changeimg: function(num) {
				this.imgs = num
				this.loading = true
				this.getlist()
			},
			//获取列表
			getlist: function() {
				var that = this
				axios.get('/api/plan-market/message/getrenwulist?order_status=' + this.imgs + '&page_size=20' + '&page=' + this.page)
					.then(response => {
						if (response.data.msg.code == 0) {
							that.list = response.data.data.data
							that.total = response.data.data.total
							that.loading = false
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//获取短信剩余条数
			getmessagenumbers: function() {
				var that = this
				axios.get('/api/plan-market/message/getmessagenumbers')
					.then(response => {
						if (response.data.msg.code == 0) {
							that.duanxintiaoshu = response.data.data.message_recharge
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.renwuguanli {
		margin: 0;
		padding: 0;
		background: #EFEFEF;

		.center {
			width: 1366px;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;

			.right {
				flex-basis: 1166px;
				background: #EBECEF;

				.title {
					border-bottom: 1px #EAEAEA solid;
					line-height: 45px;
					padding-left: 30px;
					font-size: 16px;
					background: #F9F9F9;
					color: #727272
				}
			}

			.powertop {
				display: flex;
				width: 640px;
			}

			.powertopli {
				flex-basis: 160px;
				line-height: 45px;
				border-top: 4px #EBECEF solid;
				color: #727272;
				border-right: 1px #EAEAEA solid;
				font-size: 14px;
				text-align: center;
			}

			.powertopact {
				background: #FFFFFF;
				border-top: 4px #DD2727 solid;
			}

			.conlist {
				padding-bottom: 20px;
				background: #FFFFFF;
				min-height: 800px;

				.flex {
					display: flex;
				}

				.flexbt {
					justify-content: space-between;
				}

				.renguantop {
					padding: 20px;
					padding-bottom: 10px;
					border-bottom: 1px #EAEAEA solid;

					.jiediand {
						font-size: 16px;
						line-height: 30px;
						margin-right: 20px;
					}

					.jiedianx {
						font-size: 14px;
						color: #F1A533;
						line-height: 35px;
					}

					.duanxinn {
						color: #B8B8B8;
						line-height: 35px;
						margin-right: 10px;
					}

					.duanxinu {
						color: #DF3434;
						line-height: 35px;
						margin-right: 10px;
					}

					.duanxinb {
						background: #EEF7FF;
						line-height: 35px;
						color: #FFFFFF;
						padding: 0 10px;
						border-radius: 3px;

						a {
							color: #FFFFFF
						}
					}
				}

				.xinjianrenwu {
					padding: 20px;
				}

				.list {
					text-align: center;
					line-height: 50px;

					.th {
						flex: 1;
						background: #EAEAEA;
						font-weight: bold;
					}

					.td {
						flex: 1;
						border-bottom: 1px #EAEAEA solid;
						height: 50px;
						overflow: hidden;
					}
				}

				.flexm {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: wrap;

					div {
						flex-basis: 88px;
						text-align: center;
						font-size: 14px;

						img {
							width: 100%;
							margin-bottom: 10px;
						}
					}

				}

				.flexx {
					margin: 0 10px;

					img {
						width: 46px;
						height: 15px;
					}
				}

				.flexact {
					div {
						color: #f00
					}
				}
			}
		}
	}
</style>
